<template>
    <div id="app">
      <Head>发布求职信息</Head>
      <div class="notice_box">
            <div class="icon"></div>
            <van-notice-bar color="#ff6400" background="#fefbea">所发布的信息必须真实、准确，不得发布违法、违规、虚假、欺诈、涉黄等信息。</van-notice-bar>
      </div>
      <van-field
      required
      v-model="sub.fullname"
      label="姓名"
      placeholder="请填写"
      class="reset_after"
      />
      <van-field
      required
      class="reset_after"
      name="sex"
      label="性别">
        <template #input>
          <van-radio-group
            v-model="sub.sex"
            direction="horizontal"
            icon-size="14px"
          >
            <van-radio name="1">男</van-radio>
            <van-radio name="2">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        required
        :value="sub.experience_text"
        label="工作年限"
        readonly
        placeholder="请选择"
        @click="showPickerExperience = true"
        class="form_choose reset_after"
      />
      <van-popup v-model="showPickerExperience" position="bottom">
        <van-picker
          show-toolbar
          :columns="columnsExperience"
          :default-index="experienceDefaultIndex"
          @confirm="onConfirmExperience"
          @cancel="showPickerExperience = false"
        />
      </van-popup>
      <van-field
      required
      v-model="sub.wantjob"
      label="想找工作"
      placeholder="如：服务员"
      class="reset_after"
      />
      <van-field
      v-if="!sub.id"
      required
      v-model="sub.telephone"
      label="联系电话"
      placeholder="请填写  发布后不能修改"
      type="number"
      class="reset_after"
      />
      <van-field
      v-if="sub.id"
      readonly
      required
      v-model="sub.telephone"
      label="电话"
      placeholder="请填写  发布后不能修改"
      type="number"
      class="reset_after"
      />
      <div class="box_2" v-if="!sub.id">
        <van-field
          required
          v-model="sub.code"
          label="验证码"
          placeholder="请填写"
          class="reset_after"
        />
        <div class="tag" @click="sendSms" :style="'color:'+$store.state.sendSmsBtnTextColor">{{ $store.state.sendSmsBtnText }}</div>
      </div>
      <Captcha ref="captcha"></Captcha>
      <van-field
      readonly
      required
      label="具体描述"
      class="reset_after no_border"
      />
      <van-field
      v-model="sub.content"
      rows="5"
      autosize
      label=""
      type="textarea"
      placeholder="请填写个人求职的具体需求，如学历、年龄、工作经验等相关信息。"
      class="reset_after describe"
      />
      <van-field
        v-if="!sub.id"
        required
        :value="sub.validname"
        label="有效期"
        readonly
        placeholder="请选择"
        @click="show = true"
        class="form_choose reset_after"
      />
      <van-popup v-model="show" position="bottom">
          <van-picker
              show-toolbar
              :columns="daylist"
              @confirm="onConfirm"
              @cancel="show = false"
          />
      </van-popup>
      <div class="box_2" v-if="sub.id">
        <van-field
          required
          label="有效期截止"
          readonly
          class="reset_after"
        />
        <div class="field_cen">{{endtime_cn}}<span>（到期后自动删除）</span></div>
      </div>
      <div class="box_2" v-if="sub.id">
        <van-field
          required
          v-model="sub.valid"
          label="延长有效期"
          placeholder="0"
          type="number"
          class="reset_after"
        />
        <div class="field_centwo">天<span>（0为不延长）</span></div>
      </div>
      <van-field
      required
      v-model="sub.adminpwd"
      label="管理密码"
      placeholder="请填写"
      class="reset_after"
      />
      <div class="tisp">请妥善保管您的管理密码，凭密码可以对信息进行刷新、修改、删除！</div>
      <div class="btn" @click="save">确认发布</div>
    </div>
</template>
<script>
import http from '@/utils/http'
import api from '@/api'
import ResetMobile from '@/components/account/ResetMobile'
import Captcha from '@/components/captcha/index'

export default {
  components: {
    ResetMobile,
    Captcha
  },
  data () {
    return {
      regularMobile: /^13[0-9]{9}$|14[0-9]{9}$|15[0-9]{9}$|18[0-9]{9}$|17[0-9]{9}$|16[0-9]{9}$|19[0-9]{9}$/,
      show: false,
      daylist: [{text: '7天', id: '7'}, {text: '15天', id: '15'}, {text: '30天', id: '30'}, {text: '长期', id: '0'}],
      showPickerExperience: false,
      experienceDefaultIndex: 0,
      endtime_cn: '',
      sub: {
        id: '',
        fullname: '',
        sex: '',
        experience: '',
        experience_text: '',
        wantjob: '',
        telephone: '',
        code: '',
        content: '',
        valid: '',
        validname: '',
        adminpwd: '',
        sendSmsLimit: false
      }
    }
  },
  created () {
    this.$store.dispatch('getClassify', 'experience')
    if (this.$route.query.id) {
      this.sub.id = this.$route.query.id
      this.getData()
    }
  },
  computed: {
    columnsExperience () {
      let arr = [{id: '0', text: '无经验'}]
      arr = arr.concat(this.$store.state.classifyExperience)
      return arr
    }
  },
  methods: {
    // 发送验证码 zdq验证码重复点击修改
    sendSms () {
      if (this.$store.state.sendSmsBtnDisabled) {
        return false
      }
      if (!this.sub.telephone) {
        this.$notify('请输入手机号')
        return false
      }
      if (!this.regularMobile.test(this.sub.telephone)) {
        this.$notify('手机号格式不正确')
        return false
      }
      if (this.sendSmsLimit) {
        return false
      }
      this.sendSmsLimit = true
      this.$refs.captcha.show(res => {
        this.$store
          .dispatch('sendSmsFun', {
            url: api.sendsms_auth_mobile_nocheck,
            mobile: this.sub.telephone,
            captcha: res
          })
          .then(response => {
            this.sendSmsLimit = false
            if (response.code === 200) {
              this.$notify({
                type: 'success',
                message: this.$store.state.sendSmsMessage
              })
            } else {
              this.$notify(this.$store.state.sendSmsMessage)
            }
          })
      })
    },
    onConfirm (value) {
      this.sub.valid = value.id
      this.sub.validname = value.text
      this.show = !this.show
    },
    onConfirmExperience (value) {
      this.sub.experience = value.id
      this.sub.experience_text = value.text
      this.showPickerExperience = !this.showPickerExperience
    },
    getData () {
      http.get(api.fast_resumedetail, {id: this.sub.id}).then(res => {
        this.sub.fullname = res.data.fullname
        this.sub.sex = res.data.sex + ''
        this.sub.experience = res.data.experience
        this.sub.experience_text = res.data.experience_text
        this.sub.wantjob = res.data.wantjob
        this.sub.telephone = res.data.telephone
        this.sub.content = res.data.content
        this.sub.valid = '0'
        this.endtime_cn = res.data.endtime_cn
      }).catch(() => {})
    },
    save () {
      if (!this.sub.fullname) {
        this.$notify('请填写姓名')
        return false
      }
      if (!this.sub.sex) {
        this.$notify('请选择性别')
        return false
      }
      if (!this.sub.experience) {
        this.$notify('请选择工作年限')
        return false
      }
      if (!this.sub.wantjob) {
        this.$notify('请填写职位')
        return false
      }
      if (!this.sub.telephone) {
        this.$notify('请填写电话')
        return false
      }
      if (!this.sub.id && !this.sub.code) {
        this.$notify('请填写验证码')
        return false
      }
      if (!this.sub.content) {
        this.$notify('请填写具体描述')
        return false
      }
      if (!this.sub.valid) {
        this.$notify('请选择有效期')
        return false
      }
      if (!this.sub.adminpwd) {
        this.$notify('请填写管理密码')
        return false
      }
      if (!this.sub.id) {
        http.post(api.fast_resumeedit, this.sub).then(res => {
          if (parseInt(res.code) === 200) {
            this.$notify({
              type: 'success',
              message: res.message
            })
            window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
          } else {
            this.$notify(res.message)
          }
        }).catch(err => {
          console.log(err)
        })
      } else {
        http.post(api.fast_resumepwd, {id: this.sub.id, adminpwd: this.sub.adminpwd}).then(res => {
          if (res.code == 200) {
            http.post(api.fast_resumeedit, this.sub).then(res => {
              if (parseInt(res.code) === 200) {
                this.$notify({
                  type: 'success',
                  message: res.message
                })
                window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
              } else {
                this.$notify(res.message)
              }
            }).catch(err => {
              console.log(err)
            })
          }
        }).catch(() => {})
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.notice_box{
    border-top: 5px solid #f3f3f3;
    display: flex;
    height: 38px;
    font-size: 12px;
    background: #fefbea;
    color: #ff6400;
    align-items: center;
    margin-bottom: 10px;
    .van-notice-bar{
        height: 100%;
        flex: 8;
        padding-left: 0;
    }
    .icon{
        flex: 1;
        height: 100%;
        border-radius: 4px;
        background: url('../../assets/images/remind_ico.svg') 10px center no-repeat #fefbea;
        background-size: 15px 15px;
    }
}
.box_2 {
  .field_cen{
    position: absolute;
    top: 0;
    left: 118px;
    padding-top: 15px;
    font-size: 14px;
    color: #323233;
    span{
      font-size: 13px;
      color: #999999;
    }
  }
  .field_centwo{
    position: absolute;
    top: 0;
    left: 175px;
    padding-top: 15px;
    font-size: 14px;
    color: #323233;
    span{
      margin-left: 5px;
      font-size: 13px;
      color: #999999;
    }
  }
  .tag {
    position: absolute;
    right: 17px;
    top: 0;
    padding-top: 15px;
    font-size: 14px;
  }
  .text {
    &::placeholder {
      color: #c9c9c9;
    }
    font-size: 14px;
    border: 0;
    width: 180px;
    height: 40px;
    position: absolute;
    left: 119px;
    top: 5px;
    color: #333333;
  }
  &::after {
    position: absolute;
    left: 0;
    box-sizing: border-box;
    content: " ";
    pointer-events: none;
    right: 0;
    bottom: 0;
    transform: scaleY(0.5);
    border-bottom: 1px solid #ebebeb;
  }
  width: 100%;
  height: 50px;
  background-color: #ffffff;
  position: relative;
  padding: 0 68px 0 0;
}
.tisp{
    margin-top: 23px;
    margin-bottom: 23px;
    margin-left: 16px;
    margin-right: 16px;
    font-size: 12px;
    color: #ff6600;
}
.btn{
  margin-left: 16px;
  margin-bottom: 23px;
  border-radius: 30px;
  width: calc(100vw - 32px);
  height: 44px;
  background-color: #1989f9;
  color: #ffffff;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  &.mar{
    margin-top: 27px;
  }
}
.describe{
  margin-top: 0px;
  padding-top: 0px;
}
</style>
